<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li data-action="hidden">houdunren.com</li>
      <li data-action="color" data-color="red">hdcms.com</li>
    </ul>
    <script>
      // 事件代理
      // 借助冒泡思路，我们可以不为子元素设置事件，而将事件设置在父级。然后通过父级事件对象的 event.target 查找子元素，并对他做出处理。
      // 可以使用事件代理来共享事件处理程序，不用为每个元素单独绑定事件
      class HD {
        constructor(el) {
          el.addEventListener('click', (e) => {
            const action = e.target.dataset.action;
            // 根据action调用函数 并传入e 可以查找到该事件的
            this[action](e);
          });
        }
        hidden() {
          event.target.hidden = true;
        }
        color() {
          event.target.style.color = event.target.dataset.color;
        }
      }
      new HD(document.querySelector('ul'));
    </script>
  </body>
</html>
